<template>
  <div class="toolbox-file-manager-editor">
    <tm-layout height="100%">
      <tm-layout height="auto">
        <template v-for="one in list">
          <tm-layout ref="layout" :key="`layout-${one.id}`" :width="one.width">
            <FileManager
              :source="source"
              :toolboxWorker="toolboxWorker"
              :place="one.place"
              :placeId="one.placeId"
              :openDir="one.openDir"
              :onChangeOpenDir="one.onChangeOpenDir"
            ></FileManager>
          </tm-layout>
          <template v-if="one.hasBar">
            <tm-layout-bar :key="`layout-bar-${one.id}`" right></tm-layout-bar>
          </template>
        </template>
      </tm-layout>
      <tm-layout-bar top></tm-layout-bar>
      <tm-layout height="200px">
        <Progress :source="source" :toolboxWorker="toolboxWorker"></Progress>
      </tm-layout>
    </tm-layout>
  </div>
</template>


<script>
import FileManager from "./FileManager.vue";
import Progress from "./Progress.vue";

export default {
  components: { FileManager, Progress },
  props: ["source", "toolboxWorker", "extend"],
  data() {
    return {
      list: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    init() {
      this.list.splice(0, this.list.length);
      this.$nextTick(() => {
        if (this.extend) {
          this.addOne(
            this.extend.place,
            this.extend.placeId,
            this.extend.openDir
          );
        }
      });
    },
    onFocus() {
      this.$children.forEach((one) => {
        one.onFocus && one.onFocus();
      });
    },
    refresh() {
      this.$children.forEach((one) => {
        one.refresh && one.refresh();
      });
    },
    addOne(place, placeId, openDir) {
      let list = [];
      if (this.list) {
        this.list.forEach((one) => {
          let data = Object.assign({}, one);
          list.push(data);
        });
      }
      let data = {
        id: "ID-" + this.tool.getNumber(),
        index: list.length,
        place: place,
        placeId: placeId,
        openDir: openDir,
        width: "100%",
        hasBar: false,
        onChangeOpenDir: (openDir) => {
          if (this.tool.isEmpty(openDir)) {
            openDir = "";
          }
          if (this.tool.isEmpty(openDir) && this.tool.isEmpty(data.openDir)) {
            return;
          }
          if (openDir == data.openDir) {
            return;
          }
          data.openDir = openDir;
          if (data.index == 0) {
            var keyValueMap = {};
            keyValueMap["openDir"] = openDir;
            this.toolboxWorker.updateExtend(keyValueMap);
          }
        },
      };

      list.push(data);

      if (list.length > 1) {
        list.forEach((one, index) => {
          if (index == list.length - 1) {
            one.width = "auto";
          } else {
            one.hasBar = true;
            one.width = `${100 / list.length}%`;
          }
        });
      }
      this.list = list;
      this.$nextTick(() => {
        if (this.$refs["layout"] && this.$refs["layout"].forEach) {
          this.$refs["layout"].forEach((one) => {
            one.initSize && one.initSize();
          });
        }
      });
    },
  },
  created() {},
  mounted() {
    this.init();
  },
};
</script>

<style>
.toolbox-file-manager-editor {
  width: 100%;
  height: 100%;
}
</style>
